<!--
 * @Author: yumao 123456
 * @Date: 2025-08-19 17:13:50
 * @LastEditors: 石龙飞 shilongfei@cheyipai.com
 * @LastEditTime: 2025-09-09 15:21:31
 * @FilePath: \龙飞\src\views\model\systemSetting\index.vue
 * @Description: 审批开关页面
-->
<template>
  <div class="system-setting">
    <a-card title="审核配置">
      <a-alert message="注意：未经审核的模型上线、下线、删除等操作会有风险，请谨慎关闭审核功能" banner />
      <div class="setting-content">
        <div class="approval-switch-card">
          <div class="switch-item">
            <div class="switch-info">
              <div class="switch-icon">
                <a-icon type="safety-certificate" />
              </div>
              <div class="switch-text">
                <h3>模型操作审核</h3>
                <p>开启后，模型的上线、下线、删除等操作需要经过审批流程</p>
              </div>
            </div>
            <div class="switch-control">
              <a-switch
                v-model="approvalEnabled"
                :loading="switchLoading"
                @change="handleSwitchChange"
                checked-children="已开启"
                un-checked-children="已关闭"
                size="default"
              />
            </div>
          </div>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
import { message, Modal } from 'ant-design-vue'
import { systemConfig, modelApprovalConfig } from '@/api/systemSetting'

export default {
  name: 'SystemSetting',
  data() {
    return {
      approvalEnabled: false,
      switchLoading: false,
      resetLoading: false,
    }
  },
  mounted() {
    this.getSystemConfig()
  },
  methods: {
    // 获取系统配置
    async getSystemConfig() {
      try {
        const response = await systemConfig()
        if (response && response.data && Array.isArray(response.data)) {
          // 从配置数组中找到MODEL_APPROVAL_STATUS配置项
          const modelApprovalConfig = response.data.find((item) => item.key === 'MODEL_APPROVAL_STATUS')
          if (modelApprovalConfig) {
            this.approvalEnabled = modelApprovalConfig.value === '1'
          }
        }
      } catch (error) {
        console.error('获取系统配置失败:', error)
        message.error('获取系统配置失败')
      }
    },

    // 处理开关变化
    async handleSwitchChange(checked) {
      if (!this.$hasPermission('modelApprovalConfig')) {
         message.warning('暂无操作权限，请联系管理员')
         this.approvalEnabled = !checked
         return
      }
      // 如果是关闭开关，显示二次确认弹窗
      if (!checked) {
        const confirmed = await new Promise((resolve) => {
          Modal.confirm({
            title: '确认关闭',
            content: '是否关闭审核流程？未经审核的模型上线、下线、删除会有风险，请谨慎关闭。',
            okText: '确认关闭',
            cancelText: '取消',
            onOk: () => resolve(true),
            onCancel: () => resolve(false),
          })
        })
        if (!confirmed) {
          // 用户取消，恢复开关到原来的状态
          this.approvalEnabled = true
          return
        }
      }
      this.switchLoading = true
      try {
        const value = checked ? 1 : 0
        await modelApprovalConfig({ value })
        message.success(`审批功能已${checked ? '开启' : '关闭'}`)
        // 切换后重新获取配置
        await this.getSystemConfig()
      } catch (error) {
        console.error('更新审批配置失败:', error)
        message.error('更新审批配置失败')
        // 恢复原状态
        this.approvalEnabled = !checked
      } finally {
        this.switchLoading = false
      }
    },
  },
}
</script>

<style lang="less" scoped>
.system-setting {
  background: #f5f5f5;

  .setting-header {
    margin-bottom: 24px;

    h2 {
      margin: 0 0 8px 0;
      font-size: 20px;
      font-weight: 500;
      color: #262626;
    }

    .setting-description {
      margin: 0;
      padding: 12px 16px;
      background: #fff7e6;
      border: 1px solid #ffd591;
      border-radius: 6px;
      color: #d46b08;
      font-size: 14px;
      line-height: 1.5;
    }
  }

  .setting-content {
    .approval-switch-card {
      padding: 24px;

      .switch-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;

        .switch-info {
          display: flex;
          align-items: center;

          .switch-icon {
            width: 48px;
            height: 48px;
            background: #f0f9ff;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 16px;

            .anticon {
              font-size: 24px;
              color: #1890ff;
            }
          }

          .switch-text {
            h3 {
              margin: 0 0 4px 0;
              font-size: 16px;
              font-weight: 500;
              color: #262626;
            }

            p {
              margin: 0;
              font-size: 14px;
              color: #8c8c8c;
              line-height: 1.4;
            }
          }
        }

        .switch-control {
          display: flex;
          align-items: center;
          gap: 12px;

          .switch-status {
            font-size: 14px;
            color: #595959;
            min-width: 48px;
          }
        }
      }

      .switch-actions {
        border-top: 1px solid #f0f0f0;
        padding-top: 16px;

        .ant-btn {
          margin-right: 8px;
        }
      }
    }
  }
}
</style>
